import { View, Text } from '@tarojs/components';
import { DynamicColors, GStyleSheet } from '@/utils/DarkMode';
import moment from 'moment';
import { useState, useEffect } from 'react';

interface RecordItemProps {
  record: {
    id: string;
    amount: number;
    create_time: number;
    device_id: string;
    good: {
      id: string;
      name: string;
      desc: string;
      icon_url: string;
      price: number;
    };
    pay_time: number;
    status: number;
    update_time: number;
    expire_time?: number;
  };
  onPayClick?: (record: RecordItemProps['record']) => void;
}

const dstyle = GStyleSheet.create({
  recordItem: {
    backgroundColor: DynamicColors.cardBackgroundColor,
    borderRadius: 8,
    padding: 16,
    marginTop: 12,
  },
  header: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  packageName: {
    fontSize: 16,
    fontWeight: 'bold',
    color: DynamicColors.normalTextColor,
  },
  status: {
    fontSize: 14,
    color: DynamicColors.tintColor,
  },
  statusProcessing: {
    color: DynamicColors.warnColor,
  },
  statusCanceled: {
    color: DynamicColors.normalTextGaryColor,
  },
  statusRefunding: {
    color: DynamicColors.warnColor,
  },
  statusRefunded: {
    color: DynamicColors.tintColor,
  },
  statusFailed: {
    color: DynamicColors.tintColor,
  },
  infoRow: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 8,
  },
  label: {
    fontSize: 14,
    color: DynamicColors.normalTextGaryColor,
  },
  value: {
    fontSize: 14,
    color: DynamicColors.normalTextColor,
  },
  amount: {
    fontSize: 14,
    color: DynamicColors.normalTextColor,
    fontWeight: 'bold',
  },
  countdown: {
    fontSize: 12,
    color: DynamicColors.warnColor,
    marginTop: 4,
  },
  countdownRow: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  payButton: {
    backgroundColor: DynamicColors.tintColor,
    borderRadius: 30,
    paddingHorizontal: 16,
    width: 70,
    height: 40,
    justifyContent: 'center',
    display: 'flex',
    alignItems: 'center',
    paddingVertical: 6,
    marginTop: 12,
  },
  payButtonText: {
    color: '#fff',
    fontSize: 14,
  },
  bottomRow: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    marginTop: 12,
  },
});

const getStatusText = (status: number) => {
  switch (status) {
    case 1:
      return '待支付';
    case 2:
      return '处理中';
    case 3:
      return '已取消';
    case 4:
      return '已完成';
    case 5:
      return '退款中';
    case 6:
      return '已退款';
    case 7:
      return '退款失败';
    default:
      return '未知状态';
  }
};

const getStatusStyle = (status: number, styles: any) => {
  switch (status) {
    case 1:
      return {};
    case 2:
      return styles.statusProcessing;
    case 3:
      return styles.statusCanceled;
    case 4:
      return {color: DynamicColors.normalTextColor.value};
    case 5:
      return styles.statusRefunding;
    case 6:
      return styles.statusRefunded;
    case 7:
      return styles.statusFailed;
    default:
      return {};
  }
};

const formatCountdown = (seconds: number) => {
  if (seconds <= 0) return '已过期';
  
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  
  if (minutes > 0) {
    return `${minutes}分${remainingSeconds}秒`;
  }
  return `${remainingSeconds}秒`;
};

const RecordItem: React.FC<RecordItemProps> = ({ record, onPayClick }) => {
  const styles = dstyle.useDynamicStyle();
  const [countdown, setCountdown] = useState<number>(0);

  useEffect(() => {
    if (record.status === 1 && record.expire_time) {
      const updateCountdown = () => {
        const now = Math.floor(Date.now() / 1000);
        const remaining = (record.expire_time || 0) - now;
        setCountdown(remaining > 0 ? remaining : 0);
      };

      updateCountdown();
      const timer = setInterval(updateCountdown, 1000);
      return () => clearInterval(timer);
    }
  }, [record.expire_time, record.status]);

  const handlePayClick = () => {
    onPayClick?.(record);
  };

  return (
    <View style={styles.recordItem}>
      <View style={styles.header}>
        <View>
          <Text style={styles.packageName}>{record.good.name}</Text>
        </View>
        
        <Text style={{
          ...styles.status,
          ...getStatusStyle(record.status, styles)
        }}>
          {getStatusText(record.status)}
        </Text>
      </View>
      {record.status === 1 && countdown > 0 && (
        <View style={styles.countdownRow}>
          <Text style={styles.countdown}>支付剩余时间：{formatCountdown(countdown)}</Text>
        </View>
      )}
      
      <View style={styles.infoRow}>
        <Text style={styles.label}>充值金额</Text>
        <Text style={styles.amount}>¥{record.amount}</Text>
      </View>

      <View style={styles.infoRow}>
        <Text style={styles.label}>创建时间</Text>
        <Text style={styles.value}>
          {moment(record.create_time, 'X').format('YYYY-MM-DD HH:mm:ss')}
        </Text>
      </View>

      <View style={styles.infoRow}>
        <Text style={styles.label}>设备ID</Text>
        <Text style={styles.value}>{record.device_id}</Text>
      </View>

      {record.status === 1 && countdown > 0 && (
        <View style={styles.bottomRow}>
          <View style={styles.payButton} onClick={handlePayClick}>
            <Text style={styles.payButtonText}>去支付</Text>
          </View>
        </View>
      )}
    </View>
  );
};

export default RecordItem; 